<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" type="image/png" href="/blog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#35495e">
  <meta name="description" content="小菜头的博客，主要记录学习笔记，包含：html,css,javascript,jQuery,vue等">
  <meta name="author" content="A-cai">
  <meta name="keywords" content="html,css,javascript,jQuery,vue">
  <title>CSS - A-cai的blog</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/atom-one-dark.min.css" />
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_yg9cfy8wd6.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/blog/js/utils.js" ></script>
<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>A-cai的学习笔记</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/blog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container text-center white-text fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              
  <div class="mt-3 post-meta">
    <i class="iconfont icon-date-fill" aria-hidden="true"></i>
    <time datetime="2020-06-26 14:04">
      2020年6月26日 下午
    </time>
  </div>


<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      6.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      73
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <div class="post-content mx-auto" id="post">
            
              <p class="note note-info">
                
                  本文最后更新于：2020年4月4日 下午
                
              </p>
            
            <article class="markdown-body">
              <h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h3 id="CSS-选择器的优先级是如何计算的？"><a href="#CSS-选择器的优先级是如何计算的？" class="headerlink" title="CSS 选择器的优先级是如何计算的？"></a>CSS 选择器的优先级是如何计算的？</h3><p>浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以<code>a、b、c、d</code>命名，分别代表以下含义：</p>
<ol>
<li><code>a</code>表示是否使用内联样式（inline style）。如果使用，<code>a</code>为 1，否则为 0。</li>
<li><code>b</code>表示 ID 选择器的数量。</li>
<li><code>c</code>表示类选择器、属性选择器和伪类选择器数量之和。</li>
<li><code>d</code>表示标签（类型）选择器和伪元素选择器之和。</li>
</ol>
<p>优先级的结果并非通过以上四个值生成一个得分，而是每个值分开比较。<code>a、b、c、d</code>权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。所以，如果<code>b</code>的值不同，那么<code>c</code>和<code>d</code>不管多大，都不会对结果产生影响。比如<code>0，1，0，0</code>的优先级高于<code>0，0，10，10</code>。</p>
<p>当出现优先级相等的情况时，最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则（无论是在该文件内部还是其它样式文件中），那么最后出现的（在文件底部的）样式优先级更高，因此会被采纳。</p>
<p>在写样式时，我会使用较低的优先级，这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要，这样使用者就不需要通过非常复杂的优先级规则或使用<code>!important</code>的方式，去覆盖组件的样式了。</p>
<h3 id="重置（resetting）CSS-和-标准化（normalizing）CSS-的区别是什么？你会选择哪种方式，为什么？"><a href="#重置（resetting）CSS-和-标准化（normalizing）CSS-的区别是什么？你会选择哪种方式，为什么？" class="headerlink" title="重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？"></a>重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？</h3><ul>
<li><strong>重置（Resetting）</strong>： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像<code>margin</code>、<code>padding</code>、<code>font-size</code>这些样式全部置成一样。你将必须重新定义各种元素的样式。</li>
<li><strong>标准化（Normalizing）</strong>： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。</li>
</ul>
<p>当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。</p>
<h3 id="请阐述Float定位的工作原理。"><a href="#请阐述Float定位的工作原理。" class="headerlink" title="请阐述Float定位的工作原理。"></a>请阐述<code>Float</code>定位的工作原理。</h3><p>浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。</p>
<p>CSS 的<code>clear</code>属性通过使用<code>left</code>、<code>right</code>、<code>both</code>，让该元素向下移动（清除浮动）到浮动元素下面。</p>
<p>如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。</p>
<p>有一种 hack 的方法，是自定义一个<code>.clearfix</code>类，利用伪元素选择器<code>::after</code>清除浮动。<a href="https://css-tricks.com/all-about-floats/#article-header-id-4" target="_blank" rel="noopener">另外还有一些方法</a>，比如添加空的<code>&lt;div&gt;&lt;/div&gt;</code>和设置浮动元素父元素的<code>overflow</code>属性。与这些方法不同的是，<code>clearfix</code>方法，只需要给父元素添加一个类，定义如下：</p>
<div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-class">.clearfix</span><span class="hljs-selector-pseudo">::after</span> &#123;
  <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  <span class="hljs-attribute">display</span>: block;
  <span class="hljs-attribute">clear</span>: both;
&#125;</code></pre></div>

<p>值得一提的是，把父元素属性设置为<code>overflow: auto</code>或<code>overflow: hidden</code>，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。</p>
<h6 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://css-tricks.com/all-about-floats/" target="_blank" rel="noopener">https://css-tricks.com/all-about-floats/</a></li>
</ul>
<h3 id="请阐述z-index属性。"><a href="#请阐述z-index属性。" class="headerlink" title="请阐述z-index属性。"></a>请阐述<code>z-index</code>属性。</h3><h3 id="并说明如何形成层叠上下文（stacking-context）。"><a href="#并说明如何形成层叠上下文（stacking-context）。" class="headerlink" title="并说明如何形成层叠上下文（stacking context）。"></a>并说明如何形成层叠上下文（stacking context）。</h3><p>CSS 中的<code>z-index</code>属性控制重叠元素的垂直叠加顺序。<code>z-index</code>只能影响<code>position</code>值不是<code>static</code>的元素。</p>
<p>没有定义<code>z-index</code>的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。</p>
<p>层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的<code>z-index</code>值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的<code>z-index</code>值，元素 C 也永远不会在元素 B 之上.</p>
<p>每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如<code>opacity</code>小于 1，<code>filter</code>不是<code>none</code>，<code>transform</code>不是<code>none</code>。</p>
<h3 id="请阐述块格式化上下文（Block-Formatting-Context）及其工作原理。"><a href="#请阐述块格式化上下文（Block-Formatting-Context）及其工作原理。" class="headerlink" title="请阐述块格式化上下文（Block Formatting Context）及其工作原理。"></a>请阐述块格式化上下文（Block Formatting Context）及其工作原理。</h3><p>块格式上下文（BFC）是 Web 页面的可视化 CSS 渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。</p>
<p>一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：</p>
<ul>
<li><code>float</code>的值不是<code>none</code>.</li>
<li><code>position</code>的值不是<code>static</code>或<code>relative</code>.</li>
<li><code>display</code>的值是<code>table-cell</code>、<code>table-caption</code>、<code>inline-block</code>、<code>flex</code>、或<code>inline-flex</code>。</li>
<li><code>overflow</code>的值不是<code>visible</code>。</li>
</ul>
<p>在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。</p>
<p>两个相邻的块级盒在垂直方向上的边距会发生合并（collapse）。</p>
<h2 id="有哪些清除浮动的技术，都适用哪些情况？"><a href="#有哪些清除浮动的技术，都适用哪些情况？" class="headerlink" title="有哪些清除浮动的技术，都适用哪些情况？"></a>有哪些清除浮动的技术，都适用哪些情况？</h2><ul>
<li>空<code>div</code>方法：<code>&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;</code>。</li>
<li>Clearfix 方法：上文使用<code>.clearfix</code>类已经提到。</li>
<li><code>overflow: auto</code>或<code>overflow: hidden</code>方法：上文已经提到。</li>
</ul>
<p>在大型项目中，我会使用 Clearfix 方法，在需要的地方使用<code>.clearfix</code>。设置<code>overflow: hidden</code>的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。</p>
<h3 id="请解释什么是雪碧图（css-sprites），以及如何实现？"><a href="#请解释什么是雪碧图（css-sprites），以及如何实现？" class="headerlink" title="请解释什么是雪碧图（css sprites），以及如何实现？"></a>请解释什么是雪碧图（css sprites），以及如何实现？</h3><p>雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：</p>
<ol>
<li>使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。</li>
<li>每张图片都有相应的 CSS 类，该类定义了<code>background-image</code>、<code>background-position</code>和<code>background-size</code>属性。</li>
<li>使用图片时，将相应的类添加到你的元素中。</li>
</ol>
<p>好处：</p>
<ul>
<li>减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。</li>
<li>提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在<code>:hover</code>伪类中的图片，不会出现闪烁。</li>
</ul>
<h6 id="参考-1"><a href="#参考-1" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://css-tricks.com/css-sprites/" target="_blank" rel="noopener">https://css-tricks.com/css-sprites/</a></li>
</ul>
<h3 id="如何解决不同浏览器的样式兼容性问题？"><a href="#如何解决不同浏览器的样式兼容性问题？" class="headerlink" title="如何解决不同浏览器的样式兼容性问题？"></a>如何解决不同浏览器的样式兼容性问题？</h3><ul>
<li>在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。</li>
<li>使用已经处理好此类问题的库，比如 Bootstrap。</li>
<li>使用 <code>autoprefixer</code> 自动生成 CSS 属性前缀。</li>
<li>使用 Reset CSS 或 Normalize.css。</li>
</ul>
<h3 id="如何为功能受限的浏览器提供页面？-使用什么样的技术和流程？"><a href="#如何为功能受限的浏览器提供页面？-使用什么样的技术和流程？" class="headerlink" title="如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？"></a>如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？</h3><ul>
<li>优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。</li>
<li>Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.</li>
<li>渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。</li>
<li>利用 <a href="https://caniuse.com/" target="_blank" rel="noopener">caniuse.com</a> 检查特性支持。</li>
<li>使用 <code>autoprefixer</code> 自动生成 CSS 属性前缀。</li>
<li>使用 <a href="https://modernizr.com/" target="_blank" rel="noopener">Modernizr</a>进行特性检测。</li>
</ul>
<h3 id="有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？"><a href="#有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？" class="headerlink" title="有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？"></a>有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？</h3><p>这些方法与可访问性（a11y）有关。</p>
<ul>
<li><code>visibility: hidden</code>：元素仍然在页面流中，并占用空间。</li>
<li><code>width: 0; height: 0</code>：使元素不占用屏幕上的任何空间，导致不显示它。</li>
<li><code>position: absolute; left: -99999px</code>： 将它置于屏幕之外。</li>
<li><code>text-indent: -9999px</code>：这只适用于<code>block</code>元素中的文本。</li>
<li>Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。</li>
<li>WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。</li>
</ul>
<p>即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。</p>
<h6 id="参考-2"><a href="#参考-2" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/" target="_blank" rel="noopener">https://www.w3.org/TR/wai-aria-1.1/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA</a></li>
<li><a href="http://a11yproject.com/" target="_blank" rel="noopener">http://a11yproject.com/</a></li>
</ul>
<h3 id="除了screen，你还能说出一个-media-属性的例子吗？"><a href="#除了screen，你还能说出一个-media-属性的例子吗？" class="headerlink" title="除了screen，你还能说出一个 @media 属性的例子吗？"></a>除了<code>screen</code>，你还能说出一个 @media 属性的例子吗？</h3><ul>
<li>all<br><br>适用于所有设备。</li>
<li>print<br><br>为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。</li>
<li>screen<br><br>主要适用于彩色的电脑屏幕</li>
<li></li>
</ul>
<h3 id="编写高效的-CSS-应该注意什么？"><a href="#编写高效的-CSS-应该注意什么？" class="headerlink" title="编写高效的 CSS 应该注意什么？"></a>编写高效的 CSS 应该注意什么？</h3><p>1、css选择器越简单越好</p>
<p>2、css选择器越短越好</p>
<p>3、尽量少进行设置</p>
<p>4、尽可能的减少重流，重绘</p>
<p>5、避免大量使用属性选择器</p>
<p>首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。</p>
<p><a href="https://bem.info/" target="_blank" rel="noopener">BEM (Block Element Modifier)</a> methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.<br><a href="https://bem.info/" target="_blank" rel="noopener">BEM (Block Element Modifier)</a>原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。</p>
<p>搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。</p>
<h6 id="参考-3"><a href="#参考-3" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://developers.google.com/web/fundamentals/performance/rendering/" target="_blank" rel="noopener">https://developers.google.com/web/fundamentals/performance/rendering/</a></li>
<li><a href="https://csstriggers.com/" target="_blank" rel="noopener">https://csstriggers.com/</a></li>
</ul>
<h3 id="使用-CSS-预处理的优缺点分别是什么？"><a href="#使用-CSS-预处理的优缺点分别是什么？" class="headerlink" title="使用 CSS 预处理的优缺点分别是什么？"></a>使用 CSS 预处理的优缺点分别是什么？</h3><p>less /sass</p>
<p>优点：</p>
<ul>
<li>提高 CSS 可维护性。</li>
<li>易于编写嵌套选择器。</li>
<li>引入变量，增添主题功能。可以在不同的项目中共享主题文件。</li>
<li>通过混合（Mixins）生成重复的 CSS。</li>
<li>Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.</li>
<li>将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。</li>
</ul>
<p>缺点：</p>
<ul>
<li>需要预处理工具。</li>
<li>重新编译的时间可能会很慢。</li>
</ul>
<h3 id="对于你使用过的-CSS-预处理，说说喜欢和不喜欢的地方？"><a href="#对于你使用过的-CSS-预处理，说说喜欢和不喜欢的地方？" class="headerlink" title="对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？"></a>对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？</h3><p>喜欢：</p>
<ul>
<li>绝大部分优点上题以及提过。</li>
<li>Less 用 JavaScript 实现，与 NodeJS 高度结合。</li>
</ul>
<p><strong>Dislikes:</strong></p>
<ul>
<li>我通过<code>node-sass</code>使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。</li>
<li>Less 中，变量名称以<code>@</code>作为前缀，容易与 CSS 关键字混淆，如<code>@media</code>、<code>@import</code>和<code>@font-face</code>。</li>
</ul>
<h3 id="如何实现一个使用非标准字体的网页设计？"><a href="#如何实现一个使用非标准字体的网页设计？" class="headerlink" title="如何实现一个使用非标准字体的网页设计？"></a>如何实现一个使用非标准字体的网页设计？</h3><p>字体图标什么时候用？如何用？有什么好处 ？</p>
<p>文件小、不失真，矢量图。iconfont,</p>
<p>使用<code>@font-face</code>并为不同的<code>font-weight</code>定义<code>font-family</code>。</p>
<h3 id="解释浏览器如何确定哪些元素与-CSS-选择器匹配。"><a href="#解释浏览器如何确定哪些元素与-CSS-选择器匹配。" class="headerlink" title="解释浏览器如何确定哪些元素与 CSS 选择器匹配。"></a>解释浏览器如何确定哪些元素与 CSS 选择器匹配。</h3><p>浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。</p>
<p>例如，对于形如<code>p span</code>的选择器，浏览器首先找到所有<code>&lt;span&gt;</code>元素，并遍历它的父元素直到根元素以找到<code>&lt;p&gt;</code>元素。对于特定的<code>&lt;span&gt;</code>，只要找到一个<code>&lt;p&gt;</code>，就知道’<span>`已经匹配并停止继续匹配。</p>
<h6 id="参考-4"><a href="#参考-4" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left" target="_blank" rel="noopener">https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left</a></li>
</ul>
<h3 id="描述伪元素及其用途。"><a href="#描述伪元素及其用途。" class="headerlink" title="描述伪元素及其用途。"></a>描述伪元素及其用途。</h3><p>CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（<code>:first-line</code>，<code>:first-letter</code>）或将元素添加到标记中（与 content:…组合），而不必修改标记（<code>:before</code>，<code>:after</code>）。</p>
<ul>
<li><code>:first-line</code>和<code>:first-letter</code>可以用来修饰文字。</li>
<li>上面提到的<code>.clearfix</code>方法中，使用<code>clear: both</code>来添加不占空间的元素。</li>
<li>使用<code>:before</code>和<code>after</code>展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。</li>
</ul>
<h6 id="参考-5"><a href="#参考-5" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://css-tricks.com/almanac/selectors/a/after-and-before/" target="_blank" rel="noopener">https://css-tricks.com/almanac/selectors/a/after-and-before/</a></li>
</ul>
<h3 id="说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。"><a href="#说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。" class="headerlink" title="说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。"></a>说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。</h3><p>box-sizing:</p>
<p>border-box: border/padding不会撑开元素 ，希望整个元素的宽高保持不变，但是里面的内容宽高可以发生改变的时候使用             </p>
<p>content-box：border/padding的设置会撑开元素，希望内容的宽高不变，可以元素的宽高发生变化。</p>
<p>CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的<code>padding</code>、<code>border</code>和<code>margin</code>区域。</p>
<p>CSS 盒模型负责计算：</p>
<ul>
<li>块级元素占用多少空间。</li>
<li>边框是否重叠，边距是否合并。</li>
<li>盒子的尺寸。</li>
</ul>
<p>盒模型有以下规则：</p>
<ul>
<li>块级元素的大小由<code>width</code>、<code>height</code>、<code>padding</code>、<code>border</code>和<code>margin</code>决定。</li>
<li>如果没有指定<code>height</code>，则块级元素的高度等于其包含子元素的内容高度加上<code>padding</code>（除非有浮动元素，请参阅下文）。</li>
<li>如果没有指定<code>width</code>，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的<code>padding</code>。</li>
<li>元素的<code>height</code>是由内容的<code>height</code>来计算的。</li>
<li>元素的<code>width</code>是由内容的<code>width</code>来计算的。</li>
<li>默认情况下，<code>padding</code>和<code>border</code>不是元素<code>width</code>和<code>height</code>的组成部分。</li>
</ul>
<h6 id="参考-6"><a href="#参考-6" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model" target="_blank" rel="noopener">https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model</a></li>
</ul>
<h3 id="box-sizing-border-box-会产生怎样的效果？"><a href="#box-sizing-border-box-会产生怎样的效果？" class="headerlink" title="* { box-sizing: border-box; }会产生怎样的效果？"></a><code>* { box-sizing: border-box; }</code>会产生怎样的效果？</h3><ul>
<li>元素默认应用了<code>box-sizing: content-box</code>，元素的宽高只会决定内容（content）的大小。</li>
<li><code>box-sizing: border-box</code>改变计算元素<code>width</code>和<code>height</code>的方式，<code>border</code>和<code>padding</code>的大小也将计算在内。</li>
<li>元素的<code>height</code> = 内容（content）的高度 + 垂直方向的<code>padding</code> + 垂直方向<code>border</code>的宽度</li>
<li>元素的<code>width</code> = 内容（content）的宽度 + 水平方向的<code>padding</code> + 水平方向<code>border</code>的宽度</li>
</ul>
<h3 id="display的属性值都有哪些？"><a href="#display的属性值都有哪些？" class="headerlink" title="display的属性值都有哪些？"></a><code>display</code>的属性值都有哪些？</h3><ul>
<li><code>none</code>, <code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>table</code>,flex</li>
</ul>
<h3 id="inline和inline-block有什么区别？"><a href="#inline和inline-block有什么区别？" class="headerlink" title="inline和inline-block有什么区别？"></a><code>inline</code>和<code>inline-block</code>有什么区别？</h3><p>我把<code>block</code>也加入其中，为了获得更好的比较。</p>
<table>
<thead>
<tr>
<th></th>
<th><code>block</code></th>
<th><code>inline-block</code></th>
<th><code>inline</code></th>
</tr>
</thead>
<tbody><tr>
<td>大小</td>
<td>填充其父容器的宽度。</td>
<td>取决于内容。</td>
<td>取决于内容。</td>
</tr>
<tr>
<td>定位</td>
<td>从新的一行开始，并且不允许旁边有 HTML 元素（除非是<code>float</code>）</td>
<td>与其他内容一起流动，并允许旁边有其他元素。</td>
<td>与其他内容一起流动，并允许旁边有其他元素。</td>
</tr>
<tr>
<td>能否设置<code>width</code>和<code>height</code></td>
<td>能</td>
<td>能</td>
<td>不能。 设置会被忽略。</td>
</tr>
<tr>
<td>可以使用<code>vertical-align</code>对齐</td>
<td>不可以</td>
<td>可以</td>
<td>可以</td>
</tr>
<tr>
<td>边距（margin）和填充（padding）</td>
<td>各个方向都存在</td>
<td>各个方向都存在</td>
<td>只有水平方向存在。垂直方向会被忽略。 尽管<code>border</code>和<code>padding</code>在<code>content</code>周围，但垂直方向上的空间取决于’line-height’</td>
</tr>
<tr>
<td>浮动（float）</td>
<td>-</td>
<td>-</td>
<td>就像一个<code>block</code>元素，可以设置垂直边距和填充。</td>
</tr>
</tbody></table>
<h3 id="relative、fixed、absolute和static四种定位有什么区别？"><a href="#relative、fixed、absolute和static四种定位有什么区别？" class="headerlink" title="relative、fixed、absolute和static四种定位有什么区别？"></a><code>relative</code>、<code>fixed</code>、<code>absolute</code>和<code>static</code>四种定位有什么区别？</h3><p>经过定位的元素，其<code>position</code>属性值必然是<code>relative</code>、<code>absolute</code>、<code>fixed</code>或<code>sticky</code>。</p>
<p>相对于谁？是否脱离文档流？</p>
<ul>
<li><code>static</code>：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。</li>
<li><code>relative</code>：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。</li>
<li><code>absolute</code>：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</li>
<li><code>fixed</code>：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。</li>
<li><code>sticky</code>：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 <code>table</code> 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。<code>position: sticky</code> 对 <code>table</code> 元素的效果与 <code>position: relative</code> 相同。</li>
</ul>
<h6 id="参考-7"><a href="#参考-7" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://developer.mozilla.org/en/docs/Web/CSS/position" target="_blank" rel="noopener">https://developer.mozilla.org/en/docs/Web/CSS/position</a></li>
</ul>
<h3 id="你使用过哪些现有的-CSS-框架？你是如何改进它们的？"><a href="#你使用过哪些现有的-CSS-框架？你是如何改进它们的？" class="headerlink" title="你使用过哪些现有的 CSS 框架？你是如何改进它们的？"></a>你使用过哪些现有的 CSS 框架？你是如何改进它们的？</h3><p>Boostrap / vant / layui /</p>
<ul>
<li><strong>Bootstrap</strong>： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。</li>
<li><strong>Semantic UI</strong>：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。</li>
<li><strong>Bulma</strong>： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。</li>
</ul>
<h3 id="你了解-CSS-Flex-？"><a href="#你了解-CSS-Flex-？" class="headerlink" title="你了解 CSS Flex ？"></a>你了解 CSS Flex ？</h3><h3 id="Flex"><a href="#Flex" class="headerlink" title="Flex"></a>Flex</h3><p>flex容器中存在两条轴， 主轴和侧轴， 容器中的每个单元称为flex item。</p>
<p>在容器上可以设置6个属性：</p>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-content</li>
</ul>
<p>注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。</p>
<h3 id="响应式设计与自适应设计有何不同？"><a href="#响应式设计与自适应设计有何不同？" class="headerlink" title="响应式设计与自适应设计有何不同？"></a>响应式设计与自适应设计有何不同？</h3><p>响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。</p>
<p>响应式设计的适应性原则：网站应该凭借一份代码，在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球通过膨胀和收缩，来适应不同大小的篮圈。</p>
<p>自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特性中，选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同，自适应设计允许使用多个球，然后根据不同的篮筐大小，去选择最合适的一个。</p>
<h6 id="参考-8"><a href="#参考-8" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design</a></li>
<li><a href="http://mediumwell.com/responsive-adaptive-mobile/" target="_blank" rel="noopener">http://mediumwell.com/responsive-adaptive-mobile/</a></li>
<li><a href="https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/" target="_blank" rel="noopener">https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/</a></li>
</ul>
<h3 id="什么情况下，用translate-而不用绝对定位？什么时候，情况相反。"><a href="#什么情况下，用translate-而不用绝对定位？什么时候，情况相反。" class="headerlink" title="什么情况下，用translate()而不用绝对定位？什么时候，情况相反。"></a>什么情况下，用<code>translate()</code>而不用绝对定位？什么时候，情况相反。</h3><p><code>translate()</code>是<code>transform</code>的一个值。改变<code>transform</code>或<code>opacity</code>不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。<code>transform</code>使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此<code>translate()</code>更高效，可以缩短平滑动画的绘制时间。</p>
<p>当使用<code>translate()</code>时，元素仍然占据其原始空间（有点像<code>position：relative</code>），这与改变绝对定位不同。</p>
<h6 id="参考-9"><a href="#参考-9" class="headerlink" title="参考"></a>参考</h6><ul>
<li><a href="https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank" rel="noopener">https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/</a></li>
</ul>
<h3 id="其他答案"><a href="#其他答案" class="headerlink" title="其他答案"></a>其他答案</h3><ul>
<li><a href="https://neal.codes/blog/front-end-interview-css-questions" target="_blank" rel="noopener">https://neal.codes/blog/front-end-interview-css-questions</a></li>
<li><a href="https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/" target="_blank" rel="noopener">https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/</a></li>
<li><a href="http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/" target="_blank" rel="noopener">http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/</a></li>
</ul>
<h3 id="行内元素、块级元素区别"><a href="#行内元素、块级元素区别" class="headerlink" title="行内元素、块级元素区别"></a>行内元素、块级元素区别</h3><p>行内元素：和其他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素</p>
<p>块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；行元素转换为块级元素方式：display：block；</p>
<h3 id="一边固定宽度一边宽度自适应"><a href="#一边固定宽度一边宽度自适应" class="headerlink" title="一边固定宽度一边宽度自适应"></a>一边固定宽度一边宽度自适应</h3><p>可以使用flex布局 复制下面的HTML和CSS代码 用浏览器打开可以看到效果</p>
<div class="hljs"><pre><code class="hljs stylus">&lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">"wrap"</span>&gt;
  &lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">"div1"</span>&gt;&lt;/div&gt;
  &lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">"div2"</span>&gt;&lt;/div&gt;
&lt;/div&gt;

<span class="hljs-selector-class">.wrap</span> &#123;
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">justify-content</span>: space-between;
&#125;
<span class="hljs-selector-class">.div1</span> &#123;
  <span class="hljs-attribute">min-width</span>: <span class="hljs-number">200px</span>;
&#125;
<span class="hljs-selector-class">.div2</span> &#123;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#e6e6e6</span>;
&#125;
<span class="hljs-selector-tag">html</span>,
<span class="hljs-selector-tag">body</span>,
<span class="hljs-selector-tag">div</span> &#123;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
&#125;</code></pre></div>

<h3 id="水平垂直居中的方式"><a href="#水平垂直居中的方式" class="headerlink" title="水平垂直居中的方式"></a>水平垂直居中的方式</h3><h4 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h4><div class="hljs"><pre><code class="hljs scss"><span class="hljs-comment">// 父容器</span>
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">justify-content</span>: center;
<span class="hljs-attribute">align-items</span>: center;</code></pre></div>
<h4 id="position"><a href="#position" class="headerlink" title="position"></a>position</h4><div class="hljs"><pre><code class="hljs scss"><span class="hljs-comment">// 父容器</span>
<span class="hljs-attribute">position</span>: relative;

<span class="hljs-comment">// 子容器</span>
<span class="hljs-attribute">position</span>:absolute;
<span class="hljs-attribute">margin</span>:auto;
<span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
<span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;
<span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
<span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;</code></pre></div>
<h4 id="position-transform"><a href="#position-transform" class="headerlink" title="position+transform"></a>position+transform</h4><div class="hljs"><pre><code class="hljs scss"><span class="hljs-comment">// 父容器</span>
<span class="hljs-attribute">position</span>: relative;

<span class="hljs-comment">// 子容器</span>
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
<span class="hljs-attribute">transform</span>: translate(-<span class="hljs-number">50%</span>, -<span class="hljs-number">50%</span>);</code></pre></div>
<h3 id="display-none、visibile-hidden、opacity-0的区别"><a href="#display-none、visibile-hidden、opacity-0的区别" class="headerlink" title="display:none、visibile:hidden、opacity:0的区别"></a>display:none、visibile:hidden、opacity:0的区别</h3><table>
<thead>
<tr>
<th></th>
<th>是否隐藏</th>
<th>是否在文档中占用空间</th>
<th>是否会触发事件</th>
</tr>
</thead>
<tbody><tr>
<td>display: none</td>
<td>是</td>
<td>否</td>
<td>否</td>
</tr>
<tr>
<td>visibile: hidden</td>
<td>是</td>
<td>是</td>
<td>否</td>
</tr>
<tr>
<td>opacity: 0</td>
<td>是</td>
<td>是</td>
<td>是</td>
</tr>
</tbody></table>
<p><a href="#css">回到顶部</a></p>
<h3 id="CSS中link和-import的区别"><a href="#CSS中link和-import的区别" class="headerlink" title="CSS中link和@import的区别"></a>CSS中link和@import的区别</h3><ul>
<li>link属于HTML标签，而@import是CSS提供的</li>
<li>页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载</li>
<li>import只在IE5以上才能识别，而link是HTML标签，无兼容问题</li>
<li>link方式的样式的权重 高于@import的权重</li>
</ul>
<p><a href="#css">回到顶部</a></p>
<h2 id="文本超出部分显示省略号"><a href="#文本超出部分显示省略号" class="headerlink" title="文本超出部分显示省略号"></a>文本超出部分显示省略号</h2><h4 id="单行"><a href="#单行" class="headerlink" title="单行"></a>单行</h4><div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-tag">overflow</span>: <span class="hljs-selector-tag">hidden</span>;
<span class="hljs-selector-tag">text-overflow</span>: <span class="hljs-selector-tag">ellipsis</span>;
<span class="hljs-selector-tag">white-space</span>: <span class="hljs-selector-tag">nowrap</span>;</code></pre></div>
<h4 id="多行"><a href="#多行" class="headerlink" title="多行"></a>多行</h4><div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-tag">display</span>: <span class="hljs-selector-tag">-webkit-box</span>;
<span class="hljs-selector-tag">-webkit-box-orient</span>: <span class="hljs-selector-tag">vertical</span>;
-webkit-line-clamp: 3; // 最多显示几行
<span class="hljs-selector-tag">overflow</span>: <span class="hljs-selector-tag">hidden</span>;</code></pre></div>
<p><a href="#css">回到顶部</a></p>
<h2 id="利用伪元素画三角"><a href="#利用伪元素画三角" class="headerlink" title="利用伪元素画三角"></a>利用伪元素画三角</h2><div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-class">.info-tab</span> &#123;
    <span class="hljs-attribute">position</span>: relative;
&#125;
<span class="hljs-selector-class">.info-tab</span><span class="hljs-selector-pseudo">::after</span> &#123;
    <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">4px</span> solid transparent;
    <span class="hljs-attribute">border-top-color</span>: <span class="hljs-number">#2c8ac2</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
&#125;</code></pre></div>
<p><a href="#css">回到顶部</a></p>
<h2 id="已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形"><a href="#已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形" class="headerlink" title="已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形"></a>已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形</h2><p>需要用到<code>css</code>的<code>object-fit</code>属性</p>
<div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
&#125;
<span class="hljs-selector-tag">img</span> &#123;
    <span class="hljs-attribute">object-fit</span>: cover;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
&#125;</code></pre></div>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit" target="_blank" rel="noopener">MDN</a></p>
<p><a href="#css">回到顶部</a></p>
<h2 id="css-hack是什么"><a href="#css-hack是什么" class="headerlink" title="css hack是什么"></a>css hack是什么</h2><p>由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。</p>
<p>这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。</p>
<p>这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。</p>
<p>具体请看：<br><br><a href="http://www.cnblogs.com/Renyi-Fan/p/9006084.html" target="_blank" rel="noopener">http://www.cnblogs.com/Renyi-Fan/p/9006084.html</a></p>
<p><a href="#css">回到顶部</a></p>
<h2 id="过渡与动画的区别是什么"><a href="#过渡与动画的区别是什么" class="headerlink" title="过渡与动画的区别是什么"></a>过渡与动画的区别是什么</h2><ul>
<li>transition<br><br>可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性</li>
<li>animation<br><br>可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。</li>
</ul>
<p><a href="#css">回到顶部</a></p>
<h2 id="什么是外边距合并"><a href="#什么是外边距合并" class="headerlink" title="什么是外边距合并"></a>什么是外边距合并</h2><p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。</p>
<p> 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</p>
<p><a href="#css">回到顶部</a></p>
<h2 id="去除inline-block元素间间距的方法"><a href="#去除inline-block元素间间距的方法" class="headerlink" title="去除inline-block元素间间距的方法"></a>去除inline-block元素间间距的方法</h2><ul>
<li>移除空格</li>
<li>使用margin负值</li>
<li>使用font-size:0</li>
<li>letter-spacing</li>
<li>word-spacing</li>
</ul>
<p>更详细的介绍请看:<a href="https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/" target="_blank" rel="noopener">去除inline-block元素间间距的N种方法</a></p>
<p><a href="#css">回到顶部</a></p>
<h2 id="为什么要初始化CSS样式"><a href="#为什么要初始化CSS样式" class="headerlink" title="为什么要初始化CSS样式"></a>为什么要初始化CSS样式</h2><ul>
<li>因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。</li>
<li>去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。</li>
</ul>
<p><a href="#css">回到顶部</a></p>

            </article>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/blog/2020/06/26/HTML/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">HTML</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                      <a href="/blog/2020/06/26/HTML%E5%85%83%E7%B4%A0href%E5%92%8Csrc%E7%9A%84%E5%8C%BA%E5%88%AB/">
                        <span class="hidden-mobile">HTML元素href和src的区别</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </div>
                </div>
              
            </div>

            
              <!-- Comments -->
              <div class="comments" id="comments">
                
                

              </div>
            
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/blog/js/debouncer.js" ></script>
<script  src="/blog/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/lazyload.js" ></script>
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/blog/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: 'article.markdown-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "CSS&nbsp;",
      ],
      cursorChar: "|",
      typeSpeed: 70,
      loop: true,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/blog/js/local-search.js" ></script>
  <script>
    var path = "/blog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>







  
  
    <script>
      !function (e, t, a) {
        function r() {
          for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
          requestAnimationFrame(r)
        }

        function n() {
          var t = "function" == typeof e.onclick && e.onclick;
          e.onclick = function (e) {
            t && t(), o(e)
          }
        }

        function o(e) {
          var a = t.createElement("div");
          a.className = "heart", s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
          }), t.body.appendChild(a)
        }

        function i(e) {
          var a = t.createElement("style");
          a.type = "text/css";
          try {
            a.appendChild(t.createTextNode(e))
          } catch (t) {
            a.styleSheet.cssText = e
          }
          t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
          return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }

        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
          setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
    </script>
  













</body>
</html>
